<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item :label="$t('form.language')">
      <el-select v-model="form.language" placeholder="请选择语言">
        <el-option label="中文" value="zh" />
        <el-option label="English" value="en" />
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('form.size')">
      <el-radio-group v-model="form.size">
        <el-radio value="small">small</el-radio>
        <el-radio value="default">default</el-radio>
        <el-radio value="large">large</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item :label="$t('form.autoInsertSpace')">
      <el-switch v-model="form.autoInsertSpace"/>
    </el-form-item>
    <el-form-item :label="$t('form.mode')">
      <el-switch v-model="form.mode" @change="changeMode" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary">{{ $t('form.confirm') }}</el-button>
      <el-button type="success">{{ $t('form.submit') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import useThemeStore from '~stores/module/theme'

const { theme } = useThemeStore()

const form = reactive({
  language: theme.language,
  size: theme.size,
  autoInsertSpace: theme.autoInsertSpace,
  mode: theme.mode,
  skin: theme.skin
})

const changeMode = (val) => {
  const html = document.getElementsByTagName('html')
  html[0].className = val ? 'dark' : ''
}
</script>
